<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="800px"
    @close="close"
  >
    <vab-query-form>
      <vab-query-form-right-panel :span="24">
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleEdit($event, form.const_id)"
        >
          添加
        </el-button>
        <!-- <el-button
          icon="el-icon-delete"
          type="danger"
          @click="handleDelete($event)"
        >
          批量删除
        </el-button> -->
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table v-loading="listLoading" :data="list">
      <el-table-column
        align="center"
        label="项ID"
        prop="id"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="项名称"
        prop="item_name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="项标识"
        prop="item_code"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="排序"
        prop="item_sort"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="操作"
        show-overflow-tooltip
        width="185"
      >
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row, form.const_id)">
            编辑
          </el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-detail ref="editDetail" @fetch-data="fetchData" />
    <template #footer>
      <el-button type="primary" @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getItemList, deleteItem } from '@/api/dict'
import editDetail from './editDetail'
export default {
  name: 'DictDetail',
  components: { editDetail },
  data() {
    return {
      list: [],
      listLoading: true,
      form: {},
      title: '字典详情',
      dialogFormVisible: false,
    }
  },
  methods: {
    async showEdit(row) {
      this.form.const_id = row.id
      this.form.const_name = row.constant_name
      this.form.const_code = row.constant_code
      this.form.const_desc = row.constant_desc
      this.form.const_deep = row.constant_deep
      this.form.status = row.constant_status
      this.dialogFormVisible = true
      this.fetchData()
    },
    close() {
      this.form = {}
      this.dialogFormVisible = false
    },
    handleEdit(row, id) {
      if (row.id) {
        this.$refs['editDetail'].showEdit(row, id)
      } else {
        this.$refs['editDetail'].showEdit(row, id)
      }
    },
    handleDelete(row) {
      this.$baseConfirm('你确定要删除当前项吗', null, async () => {
        const { data } = await deleteItem({ item_ids: row.id })
        if (data.is_success) {
          this.$baseMessage('删除成功', 'success', 'vab-hey-message-success')
          await this.fetchData()
        }
      })
    },
    async fetchData() {
      this.listLoading = true
      const data = await getItemList(this.form)
      this.list = data.data.length > 0 ? data.data : []
      this.listLoading = false
    },
  },
}
</script>
